<template>
  <div class="app-container">
    <el-form ref="union" :model="union" label-width="120px">
      <el-form-item label="uid">
        <label> {{ union.id }} </label>
      </el-form-item>
      <el-form-item label="玩家昵称">
        <label>[{{ union.shortName }}]{{ union.name }} </label>
      </el-form-item>
      <el-form-item label="公会积分">
        <label> {{ union.score }} </label>
      </el-form-item>
      <el-form-item label="公会宣言">
        <label> {{ union.desc }} </label>
      </el-form-item>
      <el-form-item label="允许加入">
        <label v-if="union.joinStatus == 1"> ON </label>
        <label v-else> OFF </label>
      </el-form-item>
      <el-form-item label="人数">
        <label> {{ union.num }}/50 </label>
      </el-form-item>
      <el-form-item label="星星数量">
        <label> {{ union.star }} </label>
      </el-form-item>
      <el-form-item label="星星改变时间">
        <label> {{ union.starChangeTime | formatDate }} </label>
      </el-form-item>
      <el-form-item label="创建时间">
        <label> {{ union.createTime | formatDate }} </label>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'
import { getUnionInfo } from '@/api/union'

export default {
  filters: {
    formatDate(time) {
      var date = new Date(time * 1000)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  data() {
    return {
      members: [],
      union: {
        id: '',
        shortName: '',
        name: '',
        score: 0,
        desc: '',
        joinStatus: 0,
        num: 0,
        star: 0,
        starChangeTime: 0,
        createTime: 0
      }
    }
  },
  created() {
    const uid = this.$route.params && this.$route.params.uid
    this.fetchData(uid)
  },
  methods: {
    fetchData(uid) {
      getUnionInfo(uid).then(response => {
        this.union = response.data.union
      })
    }
  }
}
</script>
